<!DOCTYPE html>
<html>
<head>
	<title>首页</title>
	<link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet">
	<link href="layui/css/layui.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<meta charset="utf-8">
</head>
<body class="page-index">
	<div class="container">
		<div class="topbar"></div>
		<div class="banner"></div>
		<div class="navbar">
			<ul>
				<li class="active"><a href="index.html">首页</a></li>
				<li><a href="html/activity.html">活动中心</a></li>
				<li><a href="html/new.html">新闻中心</a></li>
				<li><a href="html/voluntTrain.html">志愿者培训</a></li>
				<li><a href="html/controll.html">交管员社区</a></li>
				<li><a href="html/forum.html">论坛</a></li>
				<li><a href="html/personal.html">个人中心</a></li>
			</ul>
		</div>
		<div class="contents">
			<div class="headline clearfix">
				<div class="slider">
					<div class="swiper-wrapper">
					    <div class="swiper-slide"><a href=""><img src="img/slider.demo.gif" title="这是第一张图片"><p>这是第一张图片</p></a></div>
					    <div class="swiper-slide"><a href=""><img src="img/slider.demo.gif" title="这是第二张图片"><p>这是第二张图片</p></a></div>
					    <div class="swiper-slide"><a href=""><img src="img/slider.demo.gif" title="这是第三张图片"><p>这是第三张图片</p></a></div>
					  </div>
				</div>
				<div class="interactive">
					<div class="search-box">
						<form>
							<input class="ipt-keyword" type="text" name="keyword" placeholder="请输入活动名称" /> <a class="btn-search"><img src="img/btn_search.gif"></a>
						</form>
					</div>
					<div class="login box">
						<div class="title"><h2>用户登录</h2></div>
						<div class="box-cont">
							<form>
								<div class="ipt-line">
									<label>用户名：</label><input type="text" name="login-id" placeholder="账号/邮箱/手机号" class="ipt-loginid">
								</div>
								<div class="ipt-line">
									<label>密&nbsp;&nbsp;&nbsp;码：</label><input type="password" name="password" placeholder="请输入密码" class="ipt-password">
								</div>
								<div class="ipt-line code-line">
									<label>验证码：</label><input type="text" name="code" placeholder="请输入验证码"><img  class ="code" src="img/code.demo.png">
								</div>
								<div class="ipt-line buttons">
									<button class="btn-login">登录</button>
									<button class="btn-register">立即注册</button>
								</div>
							</form>
						</div>
					</div>
					<!--<div class="login box minHeight">-->
						<!--<div class="title"><h2>个人用户</h2></div>-->
						<!--<div class="box-cont">-->
							<!--<div class="txImg">-->
								<!--<img src="img/logoTx.png" class="txSty">-->
							<!--</div>-->
							<!--<div class="grxxCon">-->
								<!--<div>-->
									<!--<text class="indexNameSty">张珊珊</text>-->
									<!--<text class="hxSty">|</text>-->
									<!--<text class="zyzlx">一般志愿者</text>-->
								<!--</div>-->
								<!--<div style="margin-top: 25px;">-->
									<!--<i class="layui-icon layui-icon-component"></i>-->
									<!--牵手志愿者服务-->
									<!--<i class="layui-icon layui-icon-user"></i>-->
									<!--10023211-->
								<!--</div>-->
								<!--<div style="margin-top: 15px;">-->
									<!--加入时间：2019年9月12日-->
								<!--</div>-->
								<!--<div style="margin-top: 15px;">-->
									<!--评定星级：-->
									<!--<i class="layui-icon layui-icon-star-fill"></i>-->
									<!--<i class="layui-icon layui-icon-star-fill"></i>-->
									<!--<i class="layui-icon layui-icon-star-fill"></i>-->
									<!--<i class="layui-icon layui-icon-star"></i>-->
									<!--<i class="layui-icon layui-icon-star"></i>-->
								<!--</div>-->
								<!--<div style="margin-top: 15px;">-->
									<!--活动时长：36小时-->
								<!--</div>-->
							<!--</div>-->
							<!--<div style="clear: both;"></div>-->
						<!--</div>-->
					<!--</div>-->
				</div>
			</div>
			<div class="news clearfix">
				<div class="interactive yhdl">
					<div class="login box">
						<div class="title"><h2>用户登录</h2></div>
						<div class="box-cont">
							<form>
								<div class="ipt-line">
									<label>用户名：</label><input type="text" name="login-id" placeholder="账号/邮箱/手机号" class="ipt-loginid">
								</div>
								<div class="ipt-line">
									<label>密&nbsp;&nbsp;&nbsp;码：</label><input type="password" name="password" placeholder="请输入密码" class="ipt-password">
								</div>
								<div class="ipt-line code-line">
									<label>验证码：</label><input type="text" name="code" placeholder="请输入验证码"><img  class ="code" src="img/code.demo.png">
								</div>
								<div class="ipt-line buttons">
									<button class="btn-login">登录</button>
									<button class="btn-register">立即注册</button>
								</div>
							</form>
						</div>
					</div>
					<!--<div class="login box minHeight">-->
						<!--<div class="title"><h2>个人用户</h2></div>-->
						<!--<div class="box-cont">-->
							<!--<div class="txImg">-->
								<!--<img src="img/logoTx.png" class="txSty">-->
							<!--</div>-->
							<!--<div class="grxxCon">-->
								<!--<div>-->
									<!--<text class="indexNameSty">张珊珊</text>-->
									<!--<text class="hxSty">|</text>-->
									<!--<text class="zyzlx">一般志愿者</text>-->
								<!--</div>-->
								<!--<div style="margin-top: 25px;">-->
									<!--<i class="layui-icon layui-icon-component"></i>-->
									<!--牵手志愿者服务-->
									<!--<i class="layui-icon layui-icon-user"></i>-->
									<!--10023211-->
								<!--</div>-->
								<!--<div style="margin-top: 15px;">-->
									<!--加入时间：2019年9月12日-->
								<!--</div>-->
								<!--<div style="margin-top: 15px;">-->
									<!--评定星级：-->
									<!--<i class="layui-icon layui-icon-star-fill"></i>-->
									<!--<i class="layui-icon layui-icon-star-fill"></i>-->
									<!--<i class="layui-icon layui-icon-star-fill"></i>-->
									<!--<i class="layui-icon layui-icon-star"></i>-->
									<!--<i class="layui-icon layui-icon-star"></i>-->
								<!--</div>-->
								<!--<div style="margin-top: 15px;">-->
									<!--活动时长：36小时-->
								<!--</div>-->
							<!--</div>-->
							<!--<div style="clear: both;"></div>-->
						<!--</div>-->
					<!--</div>-->
				</div>
				<div class="top">
					<div class="title">
						<ul class="news-title">
							<li class="title-item active"><a href="http://www.baidu.com">活动预告</a></li>
							<li class="title-item"><a href="http://www.jd.com">活动公告</a></li>
						</ul>
						<a href="http://www.baidu.com" class="more">MORE</a>
					</div>
					<div class="box-cont">
						<div class="act-forenotice">
							<ul>
								<li><a href="">日照市曲阜师范大学交通志愿者举办的文明出行活动预告学交通志愿者举办的文明出行活动预告</a></li>
								<li><a href="">日照市曲阜师范大学交通志愿者举办的文明出行活动预告</a></li>
								<li><a href="">日照市交通志愿者举办的文明出行活动预告</a></li>
								<li><a href="">日交通志愿者举办的文明出行活动预告</a></li>
								<li><a href="">日交通志愿者举办的文明出行活动预告</a></li>
								<li><a href="">日照市曲阜师范大学交通志愿者举办的文明出行活动预告</a></li>
							</ul>
						</div>   
						<div class="act-bulletin hidden">
							<ul>
								<li><a href="">我是公告学交通志愿者举办的文明出行活动预告</a></li>
								<li><a href="">我是公告学交通志愿者举办的文明出行活动预告</a></li>
								<li><a href="">我是公告举办的文明出行活动预告</a></li>
								<li><a href="">我是公告的文明出行活动预告</a></li>
								<li><a href="">我是公告的文明出行活动预告</a></li>
								<li><a href="">我是公告学交通志愿者举办的文明出行活动预告</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="rank box">
					<div class="title"><h2>志愿者排名</h2> <a href="html/voluntManagement.html" class="more">MORE</a> </div>
					<div class="box-cont">
						<div class="tab-ctrl">
							<ul>
								<li class="tab-ctrl-item active">按时长</li>
								<li class="tab-ctrl-item">按积分</li>
							</ul>
						</div>
						<div class="tab-pannel">
							<div class="list-by-hour">
								<ul>
									<li>
										<span class="number front">1</span><a class="name" href="">李祥民</a><span class="remarks">813h</span>
									</li>
									<li>
										<span class="number front">2</span><a class="name" href="">李祥民</a><span class="remarks">813h</span>
									</li>
									<li>
										<span class="number front">3</span><a class="name" href="">李祥民</a><span class="remarks">813h</span>
									</li>
									<li>
										<span class="number">4</span><a class="name" href="">李祥民</a><span class="remarks">813h</span>
									</li>
									<li>
										<span class="number">5</span><a class="name" href="">李祥民</a><span class="remarks">813h</span>
									</li>
									<li>
										<span class="number">6</span><a class="name" href="">李祥民</a><span class="remarks">813h</span>
									</li>
								</ul>
							</div>
							<div class="list-by-credit hidden">
								<ul>
									<li>
										<span class="number front">1</span><a class="name" href="">隔壁二蛋</a><span class="remarks">118分</span>
									</li>
									<li>
										<span class="number front">2</span><a class="name" href="">隔壁二蛋</a><span class="remarks">118分</span>
									</li>
									<li>
										<span class="number front">3</span><a class="name" href="">隔壁二蛋</a><span class="remarks">118分</span>
									</li>
									<li>
										<span class="number">4</span><a class="name" href="">隔壁二蛋</a><span class="remarks">118分</span>
									</li>
									<li>
										<span class="number">5</span><a class="name" href="">隔壁二蛋</a><span class="remarks">118分</span>
									</li>
									<li>
										<span class="number">6</span><a class="name" href="">隔壁二蛋</a><span class="remarks">118分</span>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="entrance">
				<div class="entrance-title"></div>
				<div class="entrance-item"><a href="html/apply.html">啄木鸟志愿者报名通道</a></div>
				<div class="entrance-item"><a href="html/apply.html">牵手志愿者报名通道</a></div>
			</div>
			<div class="map">
				<div class="volunteers box dt">
					<div class="title"><h2>牵手志愿者实时岗位分布图</h2></div>
					<div class="box-cont">

					</div>
				</div>
				<div class="volunteers box dt dtMargin">
					<div class="title"><h2>牵手志愿者实时岗位分布图</h2></div>
					<div class="box-cont">

					</div>
				</div>
				<div style="clear: both;"></div>
			</div>

			<div class="volunteers box">
				<div class="title"><h2>志愿者风采</h2></div>
				<div class="box-cont">
					<ul>
						<li><a href="/" title="志愿者"><img src="img/volunteers.png"></a></li>
						<li><a href="/" title="志愿者"><img src="img/volunteers.png"></a></li>
						<li><a href="/" title="志愿者"><img src="img/volunteers.png"></a></li>
						<li><a href="/" title="志愿者"><img src="img/volunteers.png"></a></li>
						<li><a href="/" title="志愿者"><img src="img/volunteers.png"></a></li>
						<li><a href="/" title="志愿者"><img src="img/volunteers.png"></a></li>
						<li><a href="/" title="志愿者"><img src="img/volunteers.png"></a></li>						
					</ul>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="links">
				<ul>
					<li><a href="/">中国组织网</a></li>
					<li><a href="/">中国共青团网</a></li>
					<li><a href="/">中国文明网</a></li>
					<li><a href="/">中国青年志愿者网</a></li>
					<li><a href="/">山东省共青团</a></li>
					<li><a href="/">齐鲁网</a></li>
					<li><a href="/">日照文明网</a></li>
					<li><a href="/">日照共青团</a></li>
					<li><a href="/">日照政务网</a></li>
					<li><a href="/">日照警务网</a></li>					
				</ul>
			</div>
			<p class="company">主办：日照市交通局 | 协办：日照市志愿者协会</p>
			<p class="copyright">版权所有：日照市交通志愿者协会 技术支持：山东书壳儿网络科技有限公司</p>
		</div>
	</div>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>
	<script type="text/javascript" src="js/TweenMax.min.js"></script>
	<script type="text/javascript" src="js/base.js"></script>
	<script type="text/javascript" src="layui/layui.js"></script>
	<script type="text/javascript">
		
		(function($){
			"use strict";
			function init_swiper(){
				var mySwiper = new Swiper('.slider', {
					autoplay: true,//可选选项，自动滑动
				});
			}
			function bind_events(){
				$('.volunteers li img').hover(function(){$(this).MaxScaleLarge()},function(){$(this).MaxScaleSmall()});

				$('.top .title-item').off("click").on("click",function(e){
					e.preventDefault();
					var _index = $(this).index();
					var _url = $(this).find('a').prop('href');
					$('.top .more').prop('href',_url);
					$(this).addClass('active').siblings().removeClass('active');
					$('.top .box-cont div').eq(_index).removeClass("hidden").siblings().addClass("hidden");
				});
				$('.tab-ctrl-item').off("click").on("click",function(e){
					e.preventDefault();
					var _index = $(this).index();
					$(this).addClass('active').siblings().removeClass('active');
					$('.rank .tab-pannel div').eq(_index).removeClass("hidden").siblings().addClass("hidden");
				})
			}
			$(function(){
				bind_events();
				init_swiper();
			})
		})(jQuery)
	</script>
</body>
</html>